import { defineComponent, watch, ref, onMounted, toRefs } from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    const { xdata, data1, data2 } = toRefs(props.cdata.value)

    let information = {
      area: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
      legend: ['俄罗斯', '蒙古', '印度尼西亚', '澳大利亚', '其他'],
      data: [
        [2900, 2700, 3000, 2600, 2790, 4500, 4500],
        [2300, 2800, 2000, 2100, 2800, 2700, 2600],
        [4200, 4500, 5500, 6000, 2800, 2500, 2500],
        [10000, 10000, 9800, 9500, 14000, 12000, 27000],
        [2200, 2100, 2800, 3000, 5000, 4000, 6000]
      ],
      colors: ['#37B7C0', '#653ECB', '#B99025', '#2A9FEB', '#B1411C']
    }

    let options = {
      color: information.colors,
      legend: {
        top: 50,
        width: 800, // 控制legend的总宽度
        itemWidth: 16,
        itemHeight: 16,
        icon: 'rect',
        textStyle: {
          //图例文字的样式
          color: '#b4e4ff',
          fontSize: 40,
          // 给出高度和rich对象，实现图标与文字居中对齐
          rich: {
            a: {
              verticalAlign: 'middle'
            }
          }
        },
        data: information.legend
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(8,45,74,0.85)',
        // borderColor: 'rgba(9,40,84,0.8)',
        borderColor: 'rgb(140,255,74)',
        // 文字与背景的距离
        padding: [30, 30],
        // 设置圆角
        borderRadius: 10,
        textStyle: {
          fontSize: 40,
          color: '#fff'
        }
        // formatter: function (params) {
        //   // 加x轴名称
        //   var res = params[0].name + "<br/><div style=''>"
        //   for (var i = 0, l = params.length; i < l; i++) {
        //     // 创建 marker 标签
        //     var color = params[i].color // 获取系列颜色
        //     res +=
        //       "<div style='display:flex; justify-content:space-between;'><div><span style='margin-right: 5px; border-radius: 50%; display: inline-block; width:14px; height: 14px; vertical-align: middle; background-color:" +
        //       color +
        //       ";'></span>"
        //     res +=
        //       params[i].seriesName +
        //       '</div>&nbsp;&nbsp;&nbsp;&nbsp;' +
        //       "<span style='font-weight: bold;'>" +
        //       params[i].value +
        //       '</span></div>'
        //   }
        //   res += '</div>'
        //   return res
        // }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '8%',
        top: '24%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          color: '#b4e4ff',
          fontSize: 40,
          margin: 20
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(180, 228, 255, 0.3)',
            width: 2
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          // interval: information.area.length,
          lineStyle: {
            color: 'rgba(180, 228, 255, 0.1)',
            width: 2
          }
        },
        data: information.area
      },
      yAxis: {
        name: '万吨',
        nameLocation: 'end',
        nameTextStyle: {
          color: '#b4e4ff',
          fontSize: 40,
          padding: [0, 0, 60, -20]
        },
        type: 'value',
        axisLabel: {
          color: '#b4e4ff',
          fontSize: 40
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(180, 228, 255, 0.3)',
            width: 2
          }
        },
        axisTick: {
          show: false
        },

        splitArea: {
          show: false,
          areaStyle: {
            color: ['rgba(255,255,255,0)', 'rgba(18, 63, 115, 0.3)']
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: 'rgba(180, 228, 255, 0.1)'
          }
        }
      },
      series: []
    }
    for (var i = 0; i < information.legend.length; i++) {
      options.series.push({
        name: information.legend[i],
        type: 'bar',
        stack: '总用电',
        barWidth: '25%',
        label: {
          show: false,
          position: 'insideRight'
        },
        data: information.data[i]
      })
    }
    onMounted(() => {
      if (chartRef.value) {
        chartRef.value.initChart(options)
      }
    })

    return () => {
      const height = '100%'
      const width = '100%'
      return <echart ref={chartRef} height={height} width={width} />
    }
  }
})
